<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>集合时间推算</title>

</head>

<body>

    <div id="container">

    </div>

    <div id="loading">
        <div id="loading-content">加载中，请稍候...</div>
    </div>

    <div class="cardP">
        <div class="card ">
            <h2 id="addTxt"></h2>
            <div id="introP">
            </div>
        </div>
    </div>


</body>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=RsZRNlm0plnL3vPGdtQGDcSTQIvAHVuC"></script>
<style type="text/css">
    /* 加载框样式 */
    #loading {
        display: none;
        /* 默认隐藏 */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2);
        /* 半透明背景 */
        z-index: 1000;
        justify-content: center;
        align-items: center;
    }

    #loading-content {
        background: white;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
        font-size: 16px;
        font-family: Arial, sans-serif;
    }

    #addTxt {
        display: flex;
        font-family: 微软雅黑, serif;
        font-size: 16px;
        color: #af0e66;
        font-weight: normal;
        justify-content: space-around;
        height: 50px;
    }




    #introP {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        max-height: 30vh;
        /* 限制高度为视口高度的30%，可调整 */
        overflow-y: auto;
        /* 启用垂直滚动 */
        scroll-behavior: smooth;
        /* 平滑滚动 */
        padding: 10px;
        box-sizing: border-box;
    }

    /* 自定义滚动条样式（可选） */
    #introP::-webkit-scrollbar {
        width: 8px;
    }

    #introP::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    #introP::-webkit-scrollbar-thumb {
        background: #af0e66;
        border-radius: 4px;
    }

    .introItem {
        font-size: 12px;
        margin: 10px;
        padding: 5px;
        background: #f9f9f9;
        /* 增加背景色，便于区分 */
        border: 1px solid #e0e0e0;
        border-radius: 3px;
        text-align: center;
        /* 内容居中 */
    }

    .cardP {
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
        /* 确保卡片在地图下方 */
        margin-top: 10px;
        /* 与地图保持间距 */
    }

    .card {
        overflow: hidden;
        display: grid;
        padding: 10px;
        flex-direction: column;
        width: 100%;
        max-width: 1200px;
        /* 限制卡片最大宽度，适配大屏幕 */
        position: relative;
        word-wrap: break-word;
        background-color: #fff;
        border: 1px solid #e7eaf3;
        border-radius: .5rem;
        box-shadow: 2px 2px 4px #88888822;
    }


    * {
        margin: 0;
        padding: 0;
    }

    ul {
        list-style: none;
    }

    html,
    body {
        height: 100%;
    }

    #container {
        width: 100%;
        height: 800px;
        margin: 0px;
        top: 0;
    }
</style>

<script type="text/javascript">
    var data = [
        ["丁阳", "时代天街E馆", false],
        ["王明胜", "鲁能星城五街区", false],
        ["孙齐逊", "元合悠哉悠宅", false],
        ["朱俊", "鲁能星城四街区", false],
        ["李作舟", "北晨丽景", false],
        ["范盛杰", "重庆市江北区五红路40号长安华都东区", false],
        ["李文睿", "鸿恩丽舍", false],
        ["罗佳", "龙湖U城4组团", false],
        ["于殿文", "南纪门街道文化街37号", false],
        ["曹黎", "广厦城巢上3期", false],
        ["张萌莹", "同景国际城馥山", false],
        ["程竣麟", "万友七季城", false],
        ["杨镇铨", "南坪二塘路南滨六号2栋", false],
        ["李萧羽", "首钢美利花都", false],
        ["黄科", "财信·时光里", false],
        ["胡南", "江屿朗廷", false],
        ["沈洋", "隆鑫国际7栋", false],
        ["张云之", "渝北银桦路125号圣地阳光", false],
        ["罗浩云", "渝中区解放东路187号和诚大厦A", false],
        ["陈茂莹", "渝中区解放东路187号和诚大厦A", false],
        ["梁岚", "渝中区解放东路187号和诚大厦A", false],
        ["陈晓", "山顶道壹号", false],
        ["陈文瑶", "七星岗街道德兴里小区3号楼", false],
        ["苏川铸", "东海阿特豪斯3栋", false],
        ["王凯达", "碚都佳园D组团", false],
        ["张瑶", "幸福时光里", false],
        ["何瀚钊", "南方上格林紫薇苑", false],
        ["吴镇航", "龙湖·春森彼岸1期", false],
        ["张皓林", "大石坝康盛园2号楼", false],
        ["邱智文", "万科观承", false],
        ["刘抒宁", "馨茗苑", false],
        ["王仝", "重庆富力院士廷", false],
        ["周诚", "朗诗乐府领澜", false],
        ["彭昱玮", "南岸区弹子石星泽汇", false],

        ["陈灵睿", "恒基翔龙江畔", false],
        ["马丹睿", "金刚塔小区", false],
        ["刘鸣寰", "鲁能星城一街区", false],
        ["尹行行", "保利九悦荟", false],
        ["王俊翔", "鲁能星城六街区", false],
        ["朱传福", "华融现代城", false],


    ];
    var colors = [
        "#3366cc", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
        "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
        "#651067", "#329262", "#5574a6", "#3b3eac"
    ];

    var cityname = "重庆市";

    // 获取加载框元素
    var loading = document.getElementById("loading");
    var loadingContent = document.getElementById("loading-content");

    var map = new BMapGL.Map("container");
    map.centerAndZoom(new BMapGL.Point(106.531115, 29.603316), 12.5);
    map.enableScrollWheelZoom();

    // 地址解析
    var myGeo = new BMapGL.Geocoder();

    // 终点覆盖物
    var marker;


    init();

    function init() {
        var introP = document.getElementById("introP");

        for (var i = 0; i < data.length + 1; i++) {
            var item = document.createElement("div");
            item.className = "introItem";
            introP.appendChild(item);
        }
        console.log(introP.children.length);
        geoCode();
    }

    var doneIdx = 0;

    // 根据地址获取ip
    function geoCode() {
        doneIdx = 0;
        showTips("正在初始化同事"+doneIdx+"/"+data.length);
        for (let i = 0; i < data.length; i++) {
            let dataItem = data[i];
            setTimeout(() => {
                this.geoOne(dataItem);
            }, i * 200);
        }
    }



    function geoOne(dataItem) {

        myGeo.getPoint(cityname + dataItem[1], function (point) {
            if (point) {
                dataItem[3] = new BMapGL.Point(point.lng, point.lat);
                doneIdx++;
                showTips("正在初始化同事"+doneIdx+"/"+data.length);
                drawItem(dataItem)
                if (doneIdx == data.length) {
                    GeoDone();
                }
            }
        });

    }

    function drawItem(dataItem) {
        var i = data.indexOf(dataItem);
        var point = new BMapGL.Point(dataItem[3].lat, dataItem[3].lng);
        console.log(point)
        var opts = {       // 创建文本标注
            position: dataItem[3],                          // 设置标注的地理位置
        }

        // 创建文本标注对象
        var label = new BMapGL.Label(dataItem[0], opts);
        // 自定义文本标注样式
        label.setStyle({
            color: 'white',
            borderRadius: '.25rem',
            backgroundColor: getColor(i),
            borderColor: getColor(i),
            padding: '2px',
            // boxShadow:'0 2px 6px 0 rgba(114, 124, 245, .5)',
            fontSize: '12px',

            // height: '30px',
            // lineHeight: '30px',
            // fontFamily: '微软雅黑'

            //  style: {
            //     // 'padding': '.75rem 1.25rem',
            //     'margin-bottom': '1rem',
            //     'border-radius': '.25rem',
            //     'background-color': getColor(i),
            //     'width': '20 rem',
            //     'border-width': 0,
            //     'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
            //     'text-align': 'center',
            //     'font-size': '12px',
            //     'color': 'white'
            // },
        });
        map.addOverlay(label);
        console.log("draw", dataItem)
    }

    function getColor(idx) {
        return colors[idx % colors.length]
    }

    // 地图定义点击事件
    function GeoDone() {
        closeTips();
        map.addEventListener('click', handleClick);
        function handleClick(e) {
            // alert('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
            var endLngLat = e.latlng;
            regeoCode(endLngLat);

            for (let i = 0; i < transitArr.length; i++) {
                transitArr[i].clearResults();
            }
            showTips("获取路径完成" + transitArr.length + "/" + data.length)
            transitArr = [];
            for (let i = 0; i < data.length; i++) {
                let role = data[i];
                setTimeout(() => {
                    search(i, role, endLngLat);
                }, i * 200);
            }
        }
    }

    // 位置终点
    function regeoCode(endLngLat) {
        if (marker) {
            map.removeOverlay(marker);
        }
        marker = new BMapGL.Marker(endLngLat);
        map.addOverlay(marker);
        myGeo.getLocation(endLngLat, function (rs) {
            var addComp = rs.addressComponents;
            var adrStr = addComp.district + " " + addComp.street + " " + addComp.streetNumber;
            // console.log(addComp)
            // var opts = {
            //     width: 50,     // 信息窗口宽度
            //     height: 20,     // 信息窗口高度
            //     title: "集合地点", // 信息窗口标题
            //     message: adrStr,
            // }
            // var infoWindow = new BMapGL.InfoWindow(adrStr, opts);
            // map.openInfoWindow(infoWindow, endLngLat);
            document.getElementById("addTxt").textContent = adrStr;

        })
    }


    var transitArr = [];

    // 开始搜索路径
    function search(idx, role, endLngLat) {
        let startLngLat = role[3];
        let isDriver = role[2];
        let color = getColor(idx);

        console.log(idx, role, endLngLat)
        let transit = new BMapGL.TransitRoute(map, {

            renderOptions: { map: map, autoViewport: false, selectFirstResult: true },
            onSearchComplete: function (results) {
                if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
                    return;
                }
                console.log("onSearchComplete")

                console.log(results);
                var plan = results.getPlan(0);

                // var steps = plan.getRouteLines();
                // steps.forEach(function (step) {
                //     // 获取该段对应的Polyline
                //     var polyline = step.getPolyline();

                //     // 设置Polyline样式
                //     if (polyline) {
                //         polyline.setOptions({
                //             strokeColor: "#FF0000", // 红色路径
                //             strokeWeight: 6,        // 线宽
                //             strokeOpacity: 0.8      // 透明度
                //         });
                //     }
                // });

                var tips = role[0] + ': ' + plan.getDuration(true) + ' ' + plan.getDistance(true);  //获取时间 获取距离
                tips = "<font color=" + color + ">" + tips + "</font>";
                introP.children[idx].innerHTML = tips;


                transitArr.push(transit);

                showTips("获取路径完成" + transitArr.length + "/" + data.length)

                if (transitArr.length == data.length) {
                    closeTips();
                }


            },


            onMarkersSet: function (pois, transfers) {
                console.log("onMarkersSet", pois)

                // 清除所有默认站点图标
                pois.forEach(function (poi) {
                    map.removeOverlay(poi.marker);
                });
                transfers.forEach(function (transfer) {
                    map.removeOverlay(transfer.marker);
                });

            },

            onPolylinesSet: function (lines, routes) {
                // console.log("onPolylinesSet")

                var style = {
                    strokeColor: color,
                    strokeWeight: 6,        // 线宽
                    strokeOpacity: 0.5      // 透明度
                }

                // 改变步行颜色
                for (let ri = 0; ri < routes.length; ri++) {
                    let rount = routes[ri];
                    var polyline = rount.getPolyline();
                    console.log(polyline)
                    polyline.setOptions(style);
                }

                // 改变公交颜色
                for (let ri = 0; ri < lines.length; ri++) {
                    let line = lines[ri];
                    var polyline = line.getPolyline();
                    polyline.setOptions(style);
                }

            }


        });

        transit.search(startLngLat, endLngLat);
    }

    function showTips(str) {
        loading.style.display = "flex"; // 显示加载框
        loadingContent.innerText = str;
    }

    function closeTips() {
        loading.style.display = "none";
    }

</script>